<template>
  <div class='investigation first-box' v-if="listData.length>0">
    <div class="invest">
      <img :src="imgs.logo" alt="">
      <p class="tip">{{tip}}</p>

      <div>
        <div class="ques-one" v-for="(item,index) in listData">
          <p class="title">{{index+1}}、{{item.question}}[{{item.type | formalType}}]</p>

          <ul v-if="item.type==0">
            <li v-for="option in item.answers" class="option" @click="chooseThis(item,option)">
              <p><img class="fl" :src="option.active?imgs.choose1:imgs.choose" alt=""><span>{{option.label}}</span></p>
            </li>
          </ul>
          <ul v-else-if="item.type==1">
            <li v-for="option in item.answers" class="option" @click="chooseManey(item,option)">
              <p><img class="fl" :src="option.active?imgs.choose1:imgs.choose" alt=""><span>{{option.label}}</span></p>
            </li>
          </ul>
          <ul v-else-if="item.type==2">
            <textarea v-model="item.content" style="width:100%;min-height:150px;box-sizing:border-box"></textarea>
          </ul>

        </div>
      </div>
    </div>
    <Btn class="margin30" :buttonData="buttonData"></Btn>
  </div>
  <p class="no-data" v-else>暂时没有数据</p>
</template>
<script>

import Btn from "../../common/button.vue"
export default {
  components: {Btn},
  name: "",
  data() {
    return {
      imgs:{
        logo:require('../../../assets/img/vip/investition/1.png'),
        choose:require('../../../assets/img/hpmepage/renew/choose.png'),//未选中
        choose1:require('../../../assets/img/hpmepage/renew/choose_1.png'),

      },
      buttonData:[
        {
          label:"提交",
          click:this.save
        }
      ],

      tip:"尊敬的用户,  感谢您参加本次调查,  您的意见将帮助我们提供更好的服务。",
      listData:[
        {
          id:1,
          type:"0",//0单选，1多选，2问答，
          question:"请问除了车医生, 您还使用过那种养车APP？",
          answers:[
            {
              id:1,
              label:"经典养阿斯顿发送到发阿斯顿发送到发水电费阿斯顿发送到发车",
              active:false,
            },{
              id:1,
              label:"经典养车",
              active:false,
            },{
              id:1,
              label:"经典养车",
              active:false,
            }
          ]
        },{
          id:1,
          type:"1",//0单选，1多选，2问答，
          question:"请问除了车医生, 您还使用过那种养车APP？",
          answers:[
            {
              id:1,
              label:"经典发车",
              active:false,
            },{
              id:1,
              label:"经典养车",
              active:false,
            },{
              id:1,
              label:"经典养车",
              active:false,
            }
          ]
        },{
          id:1,
          type:"2",//0单选，1多选，2问答，
          question:"请问除了车医生, 您还使用过那种养车APP？",
          content:""
        }
      ]
    };
  },
  filters:{
    formalType(type){
      var array=["单选","多选","问答"]
      return array[type]
    },
  },
  methods: {
    chooseThis(item,option){
      item.answers.forEach(ele => {
          ele.active=false
      });
      this.$set(option,"active",true)
    },
    chooseManey(item,option){
      this.$set(option,"active",!option.active)
    },

    save(){

      console.log("click----提价问卷结果")
    },
    getList(){
      var params={
        userId:sessionStorage.getItem("userId")
      }
      _g.apiPost("vipQuestionnaire/init.do",params).then(res=>{
        var goal=[]
        res.data.forEach(ele=>{
          var obj={
            id:ele.id,
            question:ele.question,
            type:ele.type,
          }
          if(ele.type!==2){
            obj.answers=[]
            ele.list.forEach(ele1=>{
              obj.answers.push({
                id:ele1.id,
                label:ele1.optionContent,
                active:false,
              })
            })
          }else{
            obj.content=""
          }
          goal.push(obj)
        })
        this.$set(this,"listData",goal)
      })
    }
  },
  created() {
    this.getList()
  }
};
</script>
<style lang="scss" scoped>
.investigation {
  font-size: 12px;
  color: #999;

  .invest{
    margin: 15px;
    padding-bottom: 10px;
    background-color: #FFF9DD;
    min-height: 50%;

    .tip{
      margin: 10px;
      text-indent: 2em;
      // background-color: #fff;
      // padding: 10px;
      border-radius: 2px;
    }

    >img{
      width: 100%;
    }

    .ques-one{
      // padding: 10px;
      margin: 10px;
      background-color: #fff;
      border-radius: 5px;

      .title{
        background-color: rgba(236, 151, 28, 0.24);
        padding: 5px;
        color: #333;
        font-size: 14px;
      }

      img{
        width: 15px;
        height: 15px;
        margin-right: 10px;
      }
      .option{

        p{
          padding: 10px;

          span{
            display: inline-block;
            width: calc(100% - 30px);
          }
        }
      }
    }
  }

  .margin30{
    margin: 30px;
  }
}
</style>